<template>
    <div class="formulate">
        <div class="head"></div>
        <div class="list">
            <div class="tab-menu">
                <div class="tab-menu-item"
                     v-for="(item,index) in tabMenu"
                     :class="{'active' : tabCurr==index}"
                     @click="tabFun(index)"
                >{{item.name}}
                </div>
            </div>

            <div class="list-item">
                <div>
                    出发地
                    <input type="text" placeholder="选择出发地" v-model="orgName">

                </div>
                <div class="center"><img class="list-item-loop" src="../assets/loop.png" ></div>
                <div class="right">
                    目的地
                    <input type="text" @click="selectTarget" placeholder="选择目的地" v-model="tagName">
                </div>
            </div>
            <div class="list-item">
                <div class="left">
                    出发日期 <span class="tag" v-if="orgDate">{{getWeek(orgDate)}}</span>
                    <input type="text"  @click="selectDate" placeholder="选择出发日期" v-model="orgDate">
                </div>
                <div class="center">
                    <div class="text">{{dayNum}}天</div>
                </div>
                <div  class="right">
                    返程日期 <span  class="tag" v-if="tagDate">{{getWeek(tagDate)}}</span>
                    <input type="text" @click="selectDate"  placeholder="选择返程日期" v-model="tagDate">
                </div>
            </div>
            <div class="list-item">

               <div>
                   出行人数
                   <div class="num" @click="openPeople">
                       {{adultNum}}成人 ，{{childNum}}儿童
                   </div>
               </div>


            </div>
            <div class="list-item">
                <div>
                    人均预算
                    <input type="text" placeholder="请输入人均预算金额 / 元" v-model="budget">
                </div>
            </div>

            <div @click="nextStep" class="list-btn"><span>开始定制</span></div>
        </div>
        <people-num v-if="openPeopleFlag" :num="[adultNum,childNum]" @peopleSelect="peopleSelectFn" ></people-num>
        <TabBar :curr="tabBarCurr"></TabBar>
    </div>
</template>

<script>
    import {Toast} from 'mint-ui';
    import TabBar from "../components/TabBar"
    import PeopleNum from '../components/PeopleNum';
    import storage from '../store/localstorage'
    export default {
        name: "Formulate",
        components:{
            PeopleNum,
            TabBar
        },
        data() {
            return {
                tabBarCurr:3,
                formulate:'', //定制数据
                orgId:'', // 出发地
                orgName:'',
                orgDate:'',//出发日期
                tagId:'',// 目的地
                tagName:'',
                tagDate:'', //返程日期
                dayNum:0,//预定天数
                openPeopleFlag:false,
                adultNum:0, //成人数量
                childNum:0, //儿童数量
                budget:'', //预算
                tabCurr: 0,
                tabMenu: [{name: '个人定制'}, {name: '企业定制'}]
            }
        },
        methods: {
            tabFun(val) {
                this.tabCurr = val;
                this.formulate=storage.get('formulate');
                this.formulate.classId=this.tabCurr;
                storage.set('formulate',this.formulate)
            },
            // 选择出发城市
            selectOrigin(){
                this.$router.push('/formulate-origin');
            },
            // 选择目的城市
            selectTarget(){
                this.$router.push('/formulate-target');
            },
            // 选择日期
            selectDate(){
                this.$router.push('/formulate-date');
            },
            isNull(object){
                if(object == null || typeof object == "undefined"){
                    return true;
                }
                return false;
            },
            // 返回星期几
            getWeek(dateString){
                var date;
                if(this.isNull(dateString)){
                    return '';
                }else{
                    var dateArray = dateString.split("-");
                    date = new Date(dateArray[0], parseInt(dateArray[1] - 1), dateArray[2]);
                    return "周" + "日一二三四五六".charAt(date.getDay());
                }
                //var weeks = new Array("日", "一", "二", "三", "四", "五", "六");
                //return "星期" + weeks[date.getDay()];
            },
            openPeople(){
                this.openPeopleFlag=!this.openPeopleFlag;
            },
            peopleSelectFn(val){
                this.openPeopleFlag=false;
                this.adultNum=val.adultNum;
                this.childNum=val.childNum;
                this.formulate=storage.get('formulate');
                this.formulate.adultNum=this.adultNum;
                this.formulate.childNum=this.childNum;
                storage.set('formulate',this.formulate)
            },

            nextStep(){
                if(!this.orgName){
                    Toast({
                        message: '请选择出发地',
                        duration: 1000
                    });
                    return ;
                }
                if(!this.tagName){
                    Toast({
                        message: '请选择目的地',
                        duration: 1000
                    });
                    return ;
                }

                if(!this.orgDate){
                    Toast({
                        message: '请选择出发日期',
                        duration: 1000
                    });
                    return ;
                }
                if(!this.tagDate){
                    Toast({
                        message: '请选返程日期',
                        duration: 1000
                    });
                    return ;
                }
                if(!this.budget){
                    Toast({
                        message: '请输入人均预算金额',
                        duration: 1000
                    });
                    return ;
                }
                this.formulate=storage.get('formulate');
                this.formulate.budget=this.budget;
                storage.set('formulate',this.formulate);
                this.$router.push('/formulate-submit')
            }
        },

        mounted() {
            this.formulate=storage.get('formulate');
            if(this.formulate){
                this.tabCurr=this.formulate.classId || 0;
                this.orgId=this.formulate.orgId || '';
                this.orgName=this.formulate.orgName || '';
                this.tagId=this.formulate.tagId || '';
                this.tagName=this.formulate.tagName || '';
                this.orgDate=this.formulate.dateBegin || '';
                this.tagDate=this.formulate.dateEnd || '';
                this.dayNum=this.formulate.dayNum || '';
                this.adultNum=this.formulate.adultNum || '';
                this.childNum=this.formulate.childNum || '';
                this.budget=this.formulate.budget || '';
            }else{
                storage.set('formulate',{"classId":0});
            }
        }


    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";

    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }

    .h120 {
        height: rpx(120);
        background: $bgcolor1;
    }

    .formulate {
        position: relative;
        background-image: url(../assets/formulate_bg.jpg);
        background-repeat: no-repeat;
        background-size: contain;
        min-height: 100%;
    }
    .head{
        height: rpx(280);
    }

    .tab {
        background: $color0;
        &-menu {
            display: flex;
        }
        &-menu-item {
            flex: 1;
            padding: rpx(30) rpx(20);
            text-align: center;
            color: $color5;
            font-size: rpx(32);
            border-bottom: solid $color2 rpx(4);

            &.active {
                color: $color3;
                border-bottom: solid $color3 rpx(4);
            }
        }
    }

    //项列表
    .list {
        margin:0 rpx(30);
        box-shadow: 0 0 10px $color5;
        border-radius: rpx(10);
        background: $color0;
        padding: rpx(20);

        &-item {
            display: flex;
            position: relative;
            align-items: center;
            justify-content: space-between;
            padding: rpx(20) 0;
            border-bottom: solid 1px $color2;
            font-size: rpx(24);
            input{
                margin-top: rpx(20);
                width: 100%;
                font-size: rpx(32);
                height: rpx(50);
                font-weight: bold;
            }
            .num{
                margin-top: rpx(20);
                height: rpx(50);
                line-height: rpx(50);
                font-size: rpx(32);
                font-weight: bold;
            }
            .center{
                width: rpx(128);
                text-align: center;
            }
            &-loop{
                position: absolute;
                left: 50%;
                bottom: rpx(30);
                margin-left: rpx(-16);
                width: rpx(32);
                height: rpx(32);
            }
            .text{
                position: absolute;
                left: 50%;
                bottom: rpx(34);
                margin-left: rpx(-64);
                width: rpx(128px);
                text-align: center;
            }
            .left{
                position: relative;
                .tag{
                    padding-left: rpx(30px);
                }
            }

            .right{
                text-align: right;
                input{
                    text-align: right;
                }
                .tag{
                    padding-left: rpx(30px);
                }
            }
            &-icon {
                width: rpx(32);
                height: rpx(32);
                margin-right: rpx(40);
            }

            &-title {
                flex: 1;
                font-size: rpx(34);
            }

            &-arr {
                width: rpx(32);
                height: rpx(32);
            }
        }

        &-btn {
            display: block;
            margin: rpx(60) 0 rpx(30);
            height: rpx(80);
            line-height: rpx(80);
            background: $color3;
            border-radius: $radius6;
            color: $color0;
            font-size: rpx(34);
            text-align: center;
        }
    }
</style>

